<template>
  <el-card class="china-map"> <div ref="chart" class="chart" /></el-card>
</template>

<script>
import * as echarts from 'echarts'
import china from './china.json'

// 注册地图
echarts.registerMap('china', china)

// 随机数据
const data = china.features.map((item) => {
  return {
    name: item.properties.name,
    value: Math.round(Math.random() * 10000)
  }
})

export default {
  name: 'ChinaMap',
  mounted() {
    // 新的地图
    const myEcharts = echarts.init(this.$refs.chart)
    const option = {
      series: {
        name: '新馆疫情确诊人数',
        type: 'map',
        map: 'china', // 使用注册地图的名称
        label: {
          show: true
        },
        data
      },
      tooltip: {},
      visualMap: {
        type: 'piecewise',
        pieces: [
          { min: 8001 }, // 不指定 max，表示 max 为无限大（Infinity）。
          { min: 5001, max: 8000 },
          { min: 2001, max: 5000 },
          { min: 101, max: 2000 },
          { min: 0, max: 100 }
        ]
      }
    }
    myEcharts.setOption(option)
  }
}
</script>

<style scoped>
.china-map {
  margin: 10px 0;
}
.chart {
  width: 100%;
  height: 600px;
}
</style>
